/**
 * 简介
 */
import React from 'react';
import { Form, Input, Select } from 'antd';
import { withRouter } from 'umi';
import { FormLayout } from '../../components';
import { SelectChannel, SelectPostExtra } from '../select';
import FieldHidden from './FieldHidden';
import FieldReadOnly from './FieldReadOnly';

function ResumeBase({ form, location, eventTrackHandler }) {
    const { getFieldDecorator, setFieldsValue } = form;
    const { query } = location;

    const [formData, setFormData] = React.useState();
    React.useEffect(() => {
        if (formData) {
            form.setFieldsValue(formData);
        }
    }, [formData]);

    const prefixPhone = getFieldDecorator('phoneAreaCode', {
        initialValue: '86'
    })(
        <Select style={{ width: 70 }}>
            <Select.Option value="86">+86</Select.Option>
            <Select.Option value="65">+65</Select.Option>
        </Select>
    );

    return (
        <>
            <FormLayout>
                {!query.id && query.origin === 'talent' ? (
                    <>
                        <Form.Item label="应聘岗位">
                            {form.getFieldDecorator('recruitCode', {
                                initialValue: query.recruitCode || undefined
                            })(
                                <SelectPostExtra
                                    onChange={(_, record) => {
                                        let options = {};
                                        if (record) {
                                            options = record?.props?.options;
                                        }
                                        const { organizationName = '', organizationCode = '', dutyName = '' } = options;
                                        setFieldsValue({
                                            departmentName: organizationName,
                                            departmentCode: organizationCode,
                                            dutyName
                                        });
                                    }}
                                />
                            )}
                        </Form.Item>
                        <FieldHidden initialValue={query.dutyName} field="dutyName" form={form} />
                        <FieldHidden initialValue={query.dutyCode} field="dutyCode" form={form} />
                    </>
                ) : (
                    <>
                        <FieldReadOnly initialValue={query.dutyName} label="应聘岗位" field="dutyName" form={form} />
                        <FieldHidden initialValue={query.recruitCode} field="recruitCode" form={form} />
                        <FieldHidden initialValue={query.dutyCode} field="dutyCode" form={form} />
                    </>
                )}
                <FieldReadOnly
                    initialValue={query.organizationName}
                    label="需求部门"
                    field="departmentName"
                    form={form}
                />
                <FieldHidden initialValue={query.organizationCode} field="departmentCode" form={form} />
            </FormLayout>

            <FormLayout>
                <Form.Item label="姓名">
                    {getFieldDecorator('talentName', {
                        rules: [
                            { required: true, message: '请输入姓名' },
                            { min: 2, max: 50, message: '请输入2~50个字符' },
                            {
                                validator(rule, value, callback) {
                                    const regex = /^\s+|\s+$/;
                                    if (value && regex.test(value)) {
                                        callback('姓名首尾不能包含空格');
                                    }
                                    callback();
                                }
                            }
                        ]
                    })(
                        <Input
                            placeholder="请输入"
                            maxLength={50}
                            onClick={() => {
                                if (eventTrackHandler) eventTrackHandler('姓名');
                            }}
                        />
                    )}
                </Form.Item>
                <Form.Item label="手机号">
                    {getFieldDecorator('talentPhone', {
                        rules: [
                            { required: true, message: '请输入手机号' },
                            {
                                validator(rule, value, callback) {
                                    const regex = /[a-zA-Z\u4e00-\u9fa5 ]+/g;
                                    if (value && regex.test(value)) {
                                        callback('手机号码不能包含中英文字符和空格');
                                    }
                                    callback();
                                }
                            }
                        ]
                    })(
                        <Input
                            placeholder="请输入"
                            addonBefore={prefixPhone}
                            onClick={() => {
                                if (eventTrackHandler) eventTrackHandler('手机号');
                            }}
                        />
                    )}
                </Form.Item>
                <Form.Item label="个人邮箱">
                    {getFieldDecorator('talentEmail', {
                        rules: [
                            { required: true, message: '请输入邮箱' },
                            { message: '请输入正确的个人邮箱', type: 'email' }
                        ]
                    })(
                        <Input
                            placeholder="请输入"
                            maxLength={50}
                            onClick={() => {
                                if (eventTrackHandler) eventTrackHandler('个人邮箱');
                            }}
                        />
                    )}
                </Form.Item>
                <Form.Item label="招聘渠道">
                    {getFieldDecorator('resumeChannelCode', { rules: [{ required: true, message: '请选择渠道' }] })(
                        <SelectChannel
                            companyCode={query.companyCode}
                            onChange={(_, label) => {
                                setFormData({ resumeChannelName: label });
                            }}
                            onClick={() => {
                                if (eventTrackHandler) eventTrackHandler('招聘渠道');
                            }}
                        />
                    )}
                </Form.Item>
                <FieldHidden field="resumeChannelName" form={form} />
            </FormLayout>
        </>
    );
}

export default withRouter(ResumeBase);
